<template>
  <div class="common-table-paging my-table">
    <el-table
      v-loading="loading"
      class="common-table"
      :class="showSelection ? '' : 'table_padding'"
      :data="tableData"
      v-bind="$attrs"
      v-on="$listeners"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
      :height="tableHeight"
      ref="comTable"
    >
      <el-table-column type="selection" width="50" v-if="showSelection">
      </el-table-column>
      <template v-for="(item, index) in columns">
        <slot v-if="item.slot" :name="item.slot" />
        <el-table-column
          v-else-if="!item.children"
          :key="index"
          :type="item.type"
          :prop="item.prop"
          :sortable="item.sortable"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :align="item.align"
        >
          <template slot-scope="scope">
            <span
              :style="scope.row.opacity ? { opacity: scope.row.opacity } : ''"
              >{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span
            >
          </template>
        </el-table-column>

        <el-table-column v-else :key="item.label" :label="item.label">
          <el-table-column
            v-for="(childItem, childIndex) in item.children"
            :key="'child' + childIndex"
            :prop="childItem.prop"
            :label="childItem.label"
            :width="childItem.width"
            :min-width="childItem.minWidth"
            :formatter="childItem.formatter"
            :sortable="childItem.sortable"
            :column-key="childItem.columnKey"
          />
        </el-table-column>
      </template>
      <template slot="empty">
        <slot name="empty" />
      </template>
    </el-table>
  </div>
</template>
 
<script>
export default {
  /**
   * table组件
   */
  name: "ComTable",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true,
    },
    showSelection: {
      type: Boolean,
      default: true,
    },
    tableHeight: {
      default: 500,
      type: [String, Number],
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     *  勾选
     */
    handleSelectionChange(val) {
      this.$emit("selectionChange", val);
    },
    /**
     *  排序
     */
    sortChange(val) {
      this.$emit("sortChange", val);
    },
  },
};
</script>
<style scoped lang = "scss">
.table_padding {
  /deep/ tr th:first-child div {
    padding-left: 40px !important;
  }
  /deep/ tr td:first-child div {
    padding-left: 40px !important;
  }
}
</style>
 